<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <!--引入ElementUI的样式文件-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        .el-main {
            background-color: #FFFFFF;
            color: #333;
            /*text-align: center;*/
            line-height: 30px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }



        .bottom {
            margin-top: 13px;
            line-height: 12px;
        }








    </style>
</head>
<body>
<div id="car-container">
    <el-container>
        <el-header>Header</el-header>
        <el-main>
            <el-popconfirm
                    icon="el-icon-info"
                    icon-color="red"
                    title="确定删除选中的商品吗？"
                    @confirm="delCarBach">
                <el-button type="danger" icon="el-icon-delete" slot="reference">
                    批量删除
                </el-button>
            </el-popconfirm>
            <el-table
                    :data="carList"
                    border
                    style="width: 100%"
                    @selection-change="selectionChangeHandler">

                <el-table-column
                        type="selection"
                        width="55"
                        align="center">
                </el-table-column>

                <el-table-column
                        type="index"
                        label="序号"
                        width="50"
                        align="center">
                </el-table-column>


                <el-table-column
                        prop="bookName"
                        label="商品名称"
                        width="180"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="bookPrice"
                        label="单价"
                        width="180"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="bookImage"
                        label="图片"
                        align="center">

                    <template slot-scope="scope">
                        <el-image
                                style="width: 100px; height: 100px"
                                :src="'/images/books/'+scope.row.bookImage"
                                ></el-image>
                    </template>

                </el-table-column>

                <el-table-column
                        prop="carCount"
                        label="购买数量"
                        align="center">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.carCount" :min="1" :max="10000" @change="updateCount(scope.row.carId,scope.row.carCount)"></el-input-number>
                    </template>

                </el-table-column>


                <el-table-column

                        label="合计"
                        align="center">

                    <template slot-scope="scope">
                        {{scope.row.bookPrice*scope.row.carCount}}
                    </template>

                </el-table-column>


                <el-table-column

                        label="操作"
                        align="center">

                    <template slot-scope="scope">
                        <el-popconfirm
                                icon="el-icon-info"
                                icon-color="red"
                                title="确定删除吗？"
                                @confirm="delCar(scope.row.carId)"
                        >
                            <el-button type="danger" plain size="small" icon="el-icon-delete" slot="reference">删除</el-button>

                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer>Footer</el-footer>
    </el-container>
</div>

<script src="/js/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/qs.js"></script>
<script>
    new Vue({
        el:'#car-container',
        data(){
            return{
                carList:[],//购物车信息列表
                carIds:[],//要删除的购物车中商品的购物车编号
            }
        },
        methods:{

            getCars(){
                axios
                    .get('/car/getCarByUser/93')
                    .then(response => {
                     this.carList = response.data;
                    })
                    .catch(err=>{
                       console.log(err);
                    });
            },
            /**
             * 复选框选项改变事件
             * 参数:selection,当前已选中行的数组
             */
            selectionChangeHandler(selection){
                this.carIds=[];//清除数组中原有的数据
                for(car of selection){
                    this.carIds.push(car.carId);
                }
            },
            /**
             * 批量删除
             */
            delCarBach(){
                axios
                    .delete('/car/delCarBach', {params:{/*参数设置*/
                            /**使用Qs.stringify对数组进行序列化，将数组传参的属性名后的[]去除*/
                            carIds:this.carIds
                        },paramsSerializer: params => {
                            return Qs.stringify(params, { indices: false })
                        }})
                    .then(response=>{
                        let result = response.data;
                        if(result.success){
                            this.$message.success({
                                message:result.message,
                                duration:1500,
                                onClose:()=>{
                                    this.getCars();//刷新购物车页面
                                }
                            });
                        }
                    })
                    .catch(err=>{
                        console.log(err);
                    });
            },

            /*
            * 删除指定的商品
            * */
            delCar(carId){
                axios
                    .delete('/car/deleteCar/'+carId)
                    .then(response=>{
                        let result = response.data;
                        if(result.success){
                            this.$message.success({
                                message:result.message,
                                duration:1500,
                                onClose:()=>{
                                   this.getCars();//刷新购物车页面
                                }
                            });
                        }
                    })
                    .catch(err=>{
                        console.log(err);
                    });
            },
            updateCount(carId,carCount){
                axios
                    .put('/car/updateCarCount/'+carId+'/'+carCount)
                    .then(response=>{
                        let result = response.data;
                        if(result.success){
                            this.$message.success({
                                message:result.message,
                                duration:1500,
                                onClose:()=>{
                                    this.getCars();//刷新购物车页面
                                }
                            });
                        }
                    })
                    .catch(err=>{
                        console.log(err);
                    });

            }

        },
        created(){
            this.getCars();
        }
    });
</script>
</body>
</html>